<template>
  <div class="article-interactions">
    <!-- 交互按钮 -->
    <div class="interaction-buttons">
      <el-button
        :type="interactionStatus.isLiked ? 'danger' : 'default'"
        :icon="LinearNewOhterLikeThumbUp"
        class="interaction-btn"
        @click="$emit('like')"
      >
        {{ interactionStatus.isLiked ? "已点赞" : "点赞" }}
        <span class="count">({{ formatNumber(article.likeCount) }})</span>
      </el-button>

      <el-button
        :type="interactionStatus.isCollected ? 'warning' : 'default'"
        :icon="interactionStatus.isCollected ? Star : Star"
        class="interaction-btn"
        @click="$emit('collect')"
      >
        {{ interactionStatus.isCollected ? "已收藏" : "收藏" }}
        <span class="count">({{ formatNumber(article.collectCount) }})</span>
      </el-button>

      <el-button
        type="default"
        :icon="Share"
        class="interaction-btn"
        @click="$emit('share')"
      >
        分享
        <span class="count">({{ formatNumber(article.shareCount) }})</span>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Star,
  StarFilled,
  Folder,
  FolderOpened,
  Share,
  View,
  ChatDotSquare,
  Calendar
} from "@element-plus/icons-vue";
import { LinearNewOhterLikeThumbUp } from "@element-extended-icon-pack/vue";
import {
  UserArticleUtils,
  type UserArticleDetailResponse,
  type UserInteractionStatus
} from "@/api/user-article";

defineOptions({
  name: "ArticleInteractions"
});

interface Props {
  article: UserArticleDetailResponse;
  interactionStatus: UserInteractionStatus;
}

defineProps<Props>();

defineEmits<{
  like: [];
  collect: [];
  share: [];
  follow: [];
}>();

// 工具方法
const formatNumber = UserArticleUtils.formatNumber;
const formatReadingTime = UserArticleUtils.formatReadingTime;

const formatPublishTime = (time: string) => {
  const date = new Date(time);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric"
  });
};

const handleAvatarError = (event: Event) => {
  const img = event.target as HTMLImageElement;
  // 防止无限循环加载，只尝试一次默认图片
  if (!img.dataset.errorHandled) {
    img.dataset.errorHandled = "true";
    // 使用 base64 编码的默认头像
    img.src =
      "";
  } else {
    // 如果默认图片也加载失败，隐藏图片
    img.style.display = "none";
  }
};
</script>

<style scoped lang="scss">
@use "@/styles/user-theme.scss" as *;

/* 移动端适配 - 以iPhone XR为基准 */
@media screen and (width <= 767px) {
  .article-interactions {
    padding: 16px !important;
    margin: 20px 0 !important;
    background: #f8f9fa !important;
    border-radius: 0 !important;
  }

  .interaction-buttons {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .interaction-btn {
    flex: 1 !important;
    min-width: auto !important;
    min-height: 44px !important; // iOS推荐的最小触摸目标
    padding: 8px 10px !important;
    font-size: 13px !important;

    .count {
      font-size: 10px !important;
    }
  }

  .stats-info {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .stat-item {
    padding: 6px !important;
    font-size: 12px !important;
  }

  .article-info {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .author-card {
    padding: 12px !important;
  }

  .author-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .author-name {
    font-size: 13px !important;
  }

  .author-stat {
    font-size: 10px !important;
  }
}

/* 小屏手机适配 */
@media screen and (width <= 375px) {
  .article-interactions {
    padding: 12px !important;
    margin: 16px 0 !important;
  }

  .interaction-btn {
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;

    .count {
      font-size: 9px !important;
    }
  }

  .stat-item {
    padding: 4px !important;
    font-size: 11px !important;
  }

  .author-card {
    padding: 8px !important;
  }

  .author-avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

/* iPhone XR 专用优化 */
@media (width <= 414px) and (height <= 896px) {
  .interaction-btn {
    min-width: 44px !important;
    min-height: 44px !important; // iOS推荐的最小触摸目标
  }
}

.article-interactions {
  padding: 24px;
  margin: 32px 0;
  background: #f8f9fa;
  border-radius: 8px;
}

.interaction-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.interaction-btn {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.count {
  font-size: 12px;
  opacity: 0.8;
}

.stats-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.stat-icon {
  font-size: 16px;
  color: #409eff;
}

.stat-label {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.article-info {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.info-section h4 {
  padding-bottom: 8px;
  margin: 0 0 16px;
  font-size: 16px;
  color: #303133;
  border-bottom: 2px solid #409eff;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.info-label {
  min-width: 60px;
  font-size: 14px;
  color: #606266;
}

.info-value {
  font-size: 14px;
  color: #303133;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tag {
  margin: 0;
}

.author-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.author-details {
  flex: 1;
}

.author-name {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.author-stats {
  display: flex;
  gap: 16px;
}

.author-stat {
  font-size: 12px;
  color: #909399;
}
</style>
